<template>
  <j-modal :title="title" :width="900" :confirmLoading="loading" :visible="visible" switchFullscreen
    @cancel="handleCancel" @ok="handleOk">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol"
      style="padding:0 0 20px 20px;">
      <a-row>
        <a-col :span="12">
          <a-form-model-item class="areaBox" label="门诊所在地区" required prop="regionArr">
            <z-linkage-area placeholder="请选择行政区划" v-model="form.regionArr" @change="setAdminDivisions" @rows="onRows" />
            <!-- <a-select v-model="form.region" placeholder="请选择" style="width:100%;">
                <a-select-option v-for="(item, index) in clinicInfo" :value="item" :key="index">
                  {{ item }}
                </a-select-option>
              </a-select> -->
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="门诊名称" prop="name">
            <a-input v-model="form.name" placeholder="请输入"> </a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="收治点序号" prop="serialNumber">
            <a-tooltip placement="top" style="position: absolute;left: 96px;top: -36px;z-index: 1000;"
              :overlayStyle="{ minWidth: `100px`, maxWidth: `400px` }">
              <template slot="title">
                <div>0001到9999之间的四位数字</div>
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
            <a-input-number v-model="form.serialNumber" placeholder="请输入" style="width:100%;"> </a-input-number>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="门诊编号" prop="id">
            <a-input v-model="form.id" placeholder="请输入"> </a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="邮政编码" prop="postCode">
            <a-input v-model="form.postCode" placeholder="请输入"> </a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="门诊电话" prop="phone">
            <a-input v-model="form.phone" placeholder="请输入"> </a-input>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="审批时间" required prop="approvalTime">
            <a-date-picker allowClear v-model="form.approvalTime" valueFormat="YYYY-MM-DD" style="width:100%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="开诊时间" required prop="openingTime">
            <a-date-picker allowClear v-model="form.openingTime" valueFormat="YYYY-MM-DD" style="width:100%"
              @change="dateChange" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="门诊地址" prop="address">
            <a-input v-model="form.address" placeholder="请输入"> </a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="门诊所属单位所有制形式" required prop="ownership" allowClear>
            <a-select v-model="form.ownership" placeholder="请选择" allowClear>
              <a-select-option v-for="item in typeArr" :key="item.value">
                {{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="门诊所属单位性质" required prop="unitProperties" allowClear>
            <a-select v-model="form.unitProperties" placeholder="请选择" allowClear>
              <a-select-option v-for="item in qualityArr" :key="item.value">
                {{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>
<script>
import * as treatApi from '@/api/sjsk/help/treat.js'
import { getDictItemsFromCache } from '@/api/api'
export default {
  props: ['title'],
  components: {},
  data() {
    return {
      clinicInfo: [],
      labelCol: { span: 22 },
      wrapperCol: { span: 22 },
      form: {},
      rules: {
        regionArr: [{ required: true, message: '请选择' }],
        name: [{ required: true, message: '请输入' }],
        serialNumber: [{ required: true, message: '请输入' }],
        id: [{ required: true, message: '请输入' }],
        postCode: [
          { required: true, message: '请输入' },
          { pattern: /^[1-9][0-9]{5}$/, message: '请输入合法邮政编码', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入' },
          {
            validator: this.validPhoneMobile
          },
          // { pattern: /0\d{2,3}-\d{6,7}/, message: '请输入合法座机号码', trigger: 'change' },
          // { pattern: /^((\+?86)|(\(\+86\)))?1[3456789]\d{9}$/, message: '请输入合法手机号码', trigger: 'change' }
        ],
        approvalTime: [{ required: true, message: '请选择' }],
        openingTime: [{ required: true, message: '请选择' }],
        address: [{ required: true, message: '请输入' }],
        ownership: [{ required: true, message: '请选择' }],
        unitProperties: [{ required: true, message: '请选择' }]
      },
      isAdd: true,
      visible: false,
      qualityArr: getDictItemsFromCache('unitProperties'),
      typeArr: getDictItemsFromCache('ownership'),
      loading: false
    }
  },
  created() {
    treatApi.allClinicRegion().then((res) => {
      if (res.success) {
        this.clinicInfo = res.result ? res.result : null;
        this.loading = false
        // this.$refs.table.onClearRowKeys()
      } else {
        this.loading = false
      }
    })
      .catch((e) => {
        this.loading = false
        this.$message.warn('请求失败！')
      })
    // let user = Vue.ls.get(USER_INFO)
    // this.form.apprehendUser = Vue.ls.get(USER_INFO).realname
  },
  methods: {
    show(id) {
      this.visible = true
      this.form = {}
      if (id == undefined) {
        this.isAdd = true
      } else {
        this.isAdd = false
        treatApi.getClinicById({ clinicId: id }).then(res => {
          if (res.success) {
            this.form = res.result
            this.form.regionArr = res.result.region.split(',')
          }
        })
      }
    },
    // 获取行政区划的值
    setAdminDivisions(value) {
      this.form.region = value.join()
      // console.log(this.form.region)
      // treatApi.getClinicNameByRegion({ region: this.form.region }).then((res) => {
      //   if (res.success) {
      //   }
      // })
    },
    onRows(row) {
      // console.log("value")
      // console.log(row)
      let str = ""
      row.forEach(item => {
        str += item.title + "," //保存行政区划名称
      })
      this.form.regionWords = str.slice(0, str.length - 1) //删除最后一个逗号
      // console.log(this.form.interviewPlace)
    },
    dateChange(date) {
      console.log(date)
      // this.$set(this.form, 'startTime', date[0])
      // this.$set(this.form, 'endTime', date[1])
    },
    handleCancel() {
      this.visible = false
    },
    validPhoneMobile(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入联系人电话'));
      } else {
        let regPone = null;
        let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/; //最新16手机正则
        let tel = /0\d{2,3}-\d{6,7}/; //座机
        if (value.charAt(0) == 0) {    // charAt查找第一个字符方法，用来判断输入的是座机还是手机号
          regPone = tel;
        } else {
          regPone = mobile;
        }
        if (!regPone.test(value)) {
          callback(new Error("请填写联系人电话(座机格式'区号-座机号码')"))
        }
        callback();
      }
    },
    handleOk() {
      let api
      if (this.isAdd) {
        api = treatApi.addClinic(this.form)
      } else {
        api = treatApi.updateClinicById(this.form)
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          api.then(res => {
            if (res.success) {
              this.$message.success(res.message)
              this.$emit('ok');
              this.visible = false
              this.loading = false
            } else {
              this.loading = false
              this.$message.warn(res.message)
            }
          })
            .catch(e => {
              this.loading = false
              this.$message.warn('请求失败！')
            })
        }
      })
    },
  }
}
</script>
<style scoped lang="less">
/deep/.ant-col-22 {
  text-align: left;
}

// .areaBox{
//   /deep/ .ant-space{
//     display: block!important;
//   }
// }
/deep/.ant-space-item {
  flex: none;
  width: 119px;
}
</style>
